import React from "react";
import styled from "styled-components";

import { NavLink } from "react-router-dom";

const Footer = styled.footer`
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #000;
  display: flex;

  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    color: red;
  }
`;

const Tabbar = () => {
  return (
    <Footer>
      <div>
        <NavLink to="/home/home">首页</NavLink>
      </div>
      <div>
        <NavLink to="/home/classify">分类页</NavLink>
      </div>
      <div>
        <NavLink to="/home/cart">购物车</NavLink>
      </div>
      <div>
        <NavLink to="/home/mine">我的</NavLink>
      </div>
    </Footer>
  );
};

export default Tabbar;
